<template>
    <!-- 日历组件 -->
    <div class="block">
        <span class="demonstration">日历📅</span>
        <el-date-picker v-model="value4" type="dates" placeholder="" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const value4 = ref('')

</script>

<style scoped>
demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .container {
    flex: 1;
    border-right: solid 1px var(--el-border-color);
}

.demo-date-picker .container .block {
    border-right: none;
}

.demo-date-picker .container .block:last-child {
    border-top: solid 1px var(--el-border-color);
}

.demo-date-picker .container:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>